Exercises

Icon Buttons

Let's build an IconButton component!

We'll use the react-feather package to provide the icons. As a quick refresher, here's how we render an icon from react-feather:

import { Award } from 'react-feather';

<Award size={32} />

Acceptance Criteria:

We should be able to pass any icon we want, as a React element, to the button. We can test using the imported icons from the react-feather package
The IconButton component should render the icon in the appropriate slot

Code Playground

import React from 'react';

import {

Award,

Camera,

Frown,

Slash,

XCircle,

} from 'react-feather';

import IconButton from './IconButton';

function App() {

// TODO: Render an “IconButton”.

}

export default App;

Solution:

Stretch Goal: Restricting control

So, as we saw at the end of the solution video, it's not ideal that the consumer has so much control over the icon.

For example, there's nothing stopping them from doing this:

<IconButton
  icon={
    <Frown size={128} />
  }
>
  Rate Our Product
</IconButton>

Alternatively, what if we want to "hardcode" certain props on the provided element?

For example, I personally feel it looks better when the icons are drawn with a slightly thinner line:

<IconButton
  icon={
    <Frown strokeWidth={1.5} />
  }
>
  Rate Our Product
</IconButton>

Before:

After:

The problem here is that we need the consumers to always remember to apply this prop. I don't think that's a reasonable burden to place on them. The IconButton should be the one specifying how large the icon should be!

So, in this stretch goal, your mission is to come up a way to satisfy these conditions:

Acceptance Criteria:

The IconButton should still have an icon prop, which gives it an icon to render. IconButton should not be the one importing the icons from "react-feather".
IconButton should have 100% control over the props being applied to the icon.

I don't expect you to be able to solve this. It's a challenging exercise, and I haven't shown you how to solve it. But I think it will be helpful if you spend a few moments experimenting, and seeing what you can come up with.

Code Playground

import React from 'react';

import {

Award,

Camera,

Frown,

Slash,

XCircle,

} from 'react-feather';

import IconButton from './IconButton';

function App() {

return (

Collect Award

</IconButton>

Rate Our Product

</IconButton>

Dismiss

</IconButton>

</>

);

}

export default App;

Solution:

Solution code (success)

We explored two solutions in the video.

Solution 1: Cloning the element

// IconButton.js
import React from 'react';

import styles from './IconButton.module.css';

function IconButton({ icon, children }) {
  const clonedIcon = React.cloneElement(icon, {
    size: 20,
    strokeWidth: 1.5,
  });

  return (
    <button className={styles.wrapper}>
      <span className={styles.iconWrapper}>
        {clonedIcon}
      </span>
      <span className={styles.childrenWrapper}>
        {children}
      </span>
    </button>
  );
}

export default IconButton;

Solution 2: Passing the component through props

For this approach, we pass the component through the icon prop, rather than an element, in App.js:

// App.js
import React from 'react';
import {
  Award,
  Camera,
  Frown,
  Slash,
  XCircle,
} from 'react-feather';

import IconButton from './IconButton';

function App() {
  return (
    <>
      <IconButton icon={Award}>
        Collect Award
      </IconButton>
      <IconButton icon={Frown}>
        Rate Our Product
      </IconButton>
      <IconButton icon={XCircle}>
        Dismiss
      </IconButton>
    </>
  );
}

export default App;

Then, we render the component inside IconButton:

// IconButton.js
import React from 'react';

import styles from './IconButton.module.css';

function IconButton({ icon: Icon, children }) {
  return (
    <button className={styles.wrapper}>
      <span className={styles.iconWrapper}>
        <Icon size={20} strokeWidth={1.5} />
      </span>
      <span className={styles.childrenWrapper}>
        {children}
      </span>
    </button>
  );
}

export default IconButton;

Why not let IconButton own the icons? (warning)

Instead of passing the element/component to IconButton, what if we let IconButton “own” the icons? That way, the consumer could pick which icon they want, like selecting a dish from a menu:

<IconButton icon="award">
  Collect Reward
</IconButton>

We could implement it like this:

// IconButton.js
import React from 'react';
import {
  Award,
  Camera,
  Frown,
} from 'react-feather';

// Create a big object that maps a bunch of strings
// onto their respective icons
const ICON_MAP = {
  'award': Award,
  'camera': Camera,
  'frown': Frown,
};

function IconButton({ icon, children }) {
  // `icon` is a string, like "award".
  // We get the real component by looking it up:
  const IconComponent = ICON_MAP[icon];

  return (
    <button className={styles.wrapper}>
      <span className={styles.iconWrapper}>
        {/* Then, we render that component: */}
        <IconComponent />
      </span>
      <span className={styles.childrenWrapper}>
        {children}
      </span>
    </button>
  );
}

This approach might seem a bit simpler. So why didn't we solve it this way?

There's nothing wrong with this approach, but there is a bit of a scale problem.

In a large application, we might have 100+ different icons, from several different packages. The file size of these icons can add up.

If IconButton is the one importing those components, it means we need to load all of the icons whenever we use an IconButton element. This can add a significant amount of code to our JavaScript bundles, leading to performance problems.

With our approach above, however, we only need the user to download the icons that are actively being used. If there are only 3 icons on the page, our bundle only includes those 3 icons.

That said, in a small application with a smaller number of icons, you can use whichever approach you prefer!